import React from 'react';
import { Link } from 'umi';
import { Layout, Menu, Breadcrumb, Dropdown, Avatar, Image } from 'antd';
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
  DownOutlined,
} from '@ant-design/icons';
// import 'antd/dist/antd.css';
import styles from './_layout.less';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

const MainlayoutPage: React.FC = (props) => {
  //头像下拉菜单数据
  const menu = (
    <Menu>
      <Menu.Item>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://www.zhihu.com/"
        >
          知乎
        </a>
      </Menu.Item>
      <Menu.Item>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="http://www.pchsi.com.cn/"
        >
          懂得都懂
        </a>
      </Menu.Item>
      <Menu.Item>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://aidn.jp/mikutap/"
        >
          Miku
        </a>
      </Menu.Item>
      <Menu.Item danger>退出</Menu.Item>
    </Menu>
  );
  return (
    <div className={styles.layoutBody}>
      {/* 布局 Layout */}
      <Layout className={styles.layoutMain}>
        {/* 头部 */}
        <Header className="header">
          {/* 八维logo */}
          <div className={styles.header_logo}>
            <img
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551624718911&di=4a7004f8d71bd8da84d4eadf1b59e689&imgtype=0&src=http%3A%2F%2Fimg105.job1001.com%2Fupload%2Falbum%2F2014-10-15%2F1413365052_95IE3msH.jpg"
              alt=""
            />
          </div>
          {/* 头像下拉菜单 */}
          <Dropdown overlay={menu}>
            <div>
              <Avatar
                src={
                  <Image src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g1/M00/0E/02/Cg-4jVOtBs2Ie6pxAANqqZZMvRsAAOoUALrkqgAA2rB295.jpg" />
                }
              />
              <span>XiaoWang</span>
            </div>
          </Dropdown>
        </Header>
        <Layout>
          <Sider width={200} className="site-layout-background">
            {/* 左侧 */}
            <Menu
              mode="inline"
              theme="dark"
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              style={{ height: '100%', borderRight: 0 }}
            >
              <SubMenu key="sub1" icon={<UserOutlined />} title="试题管理">
                <Menu.Item key="1">
                  <Link to="/main/addQuestions">添加试题</Link>
                </Menu.Item>
                <Menu.Item key="2">
                  <Link to="/main/questionsType">试题分类</Link>
                </Menu.Item>
                <Menu.Item key="3">
                  <Link to="/main/watchQuestions">查看试题</Link>
                </Menu.Item>
              </SubMenu>
              <SubMenu key="sub2" icon={<LaptopOutlined />} title="用户管理">
                <Menu.Item key="5">
                  <Link to="/main/addUser">添加用户</Link>
                </Menu.Item>
                <Menu.Item key="6">
                  <Link to="/main/showUser">用户展示</Link>
                </Menu.Item>
              </SubMenu>
              <SubMenu
                key="sub3"
                icon={<NotificationOutlined />}
                title="考试管理"
              >
                <Menu.Item key="7">
                  <Link to="/main/addExam">添加考试</Link>
                </Menu.Item>
                <Menu.Item key="8">
                  <Link to="/main/exam">试卷列表</Link>
                </Menu.Item>
              </SubMenu>
              <SubMenu
                key="sub4"
                icon={<NotificationOutlined />}
                title="班级管理"
              >
                <Menu.Item key="9">
                  <Link to="/main/grade">班级管理</Link>
                </Menu.Item>
                <Menu.Item key="10">
                  <Link to="/main/room">教室管理</Link>
                </Menu.Item>
                <Menu.Item key="11">
                  <Link to="/main/student">学生管理</Link>
                </Menu.Item>
              </SubMenu>
              <SubMenu
                key="sub5"
                icon={<NotificationOutlined />}
                title="阅卷管理"
              >
                <Menu.Item key="12">
                  <Link to="/main/paper">待批班级</Link>
                </Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Layout style={{ padding: '0 24px 24px' }}>
            {/* 面包屑 */}
            <Breadcrumb style={{ margin: '16px 0', padding: '0 24px 0' }}>
              <Breadcrumb.Item>Home</Breadcrumb.Item>
              <Breadcrumb.Item>List</Breadcrumb.Item>
              <Breadcrumb.Item>App</Breadcrumb.Item>
            </Breadcrumb>
            {/* 内容区域 */}
            <Content
              className="site-layout-background"
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
                background: '#fff',
                borderRadius: '15px',
              }}
            >
              {props.children}
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </div>
  );
};
export default MainlayoutPage;
